<template>
    <img src="res/ui/boxBg.png" :width="width" :height="height" grid="[48,25,30,25]"></img>
    <txt :text="title" :x="titleX" y="12" size="24" color="#ffffff"></txt>
    <box :width="drag.width" :index="drag.index" :x="drag.x" :y="drag.y" :height="drag.height" @down="doDown" @up="doUp" @move="doMove" @out="doOut"></box>
    <tpl src="res/tpl/components/button.tpl" :x="closeX" y="8" icon="res/ui/close.png" @click="close()"></tpl>
</template>

<script>
    init(){
        this.drag = {
            x: 0,
            y: 0,
            width: 50,
            height: 50,
            index: 2,
            moveing: false
        };
        this.closeX= 0;
        this.title= "对话框";
        this.titleX= 175;
        this.pyX= 0;
        this.pyY= 0;
        this.alpha = 1;
        this.x =1;//这里有BUG
        this.y =1;
    }

    create() {
        this.closeX = this.width - 55;
        this.titleX = (this.width - this.title.length * 24)/2;
        this.drag.width = this.width;
        console.log("dialog create");
    }

    update(delta) {

    }

    destroyed() {
        this.index = 99;
    }

    close(){
        this.visible = false;
    }

    doDown(event){
        this.pyX = event.x - this.x;
        this.pyY = event.y - this.y;
        this.drag.width= this.width * 5;
        this.drag.height = this.height * 5;
        this.drag.x = -this.drag.width/2;
        this.drag.y = -this.drag.height/2;
        this.drag.index = 100;
        this.drag.moveing = true;
        this.alpha = 0.7;
    }

    doUp(event){
        if (this.drag.moveing) {
            this.drag.moveing = false;
            this.drag.height = 50;
            this.drag.x = 0;
            this.drag.y = 0;
            this.drag.width= this.width - 55;
            this.drag.index = 2;
            this.alpha = 1;
        }
    }

    doMove(event){
        if (this.drag.moveing) {
            this.x = event.x - this.pyX;
            this.y = event.y - this.pyY;
        }
    }

    doOut(event){
        if (this.drag.moveing) {
            this.x = event.x - this.pyX;
            this.y = event.y - this.pyY;
            this.doUp(event);
        }
    }
    
</script>